<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />

    <title>用户管理 - XX管理系统</title>

    <!-- Favicons -->
    <link href="assets/img/favicon.png" rel="icon" />
    <!-- Vendor CSS Files -->
    <link
      href="assets/vendor/bootstrap/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
      rel="stylesheet"
    />
    <link
      href="assets/vendor/gridjs/dist/theme/mermaid.min.css"
      rel="stylesheet"
    />

    <!-- Template Main CSS File -->
    <link href="assets/css/style.css" rel="stylesheet" />
  </head>

  <body>
    <!-- ======= Header ======= -->
    <header id="header" class="header fixed-top d-flex align-items-center">
      <div class="d-flex align-items-center justify-content-between">
        <a href="index.html" class="logo d-flex align-items-center">
          <img src="assets/img/logo.png" alt="" />
          <span class="d-none d-lg-block">XX管理系统</span>
        </a>
        <i class="bi bi-list toggle-sidebar-btn"></i>
      </div>
      <!-- End Logo -->

      <nav class="header-nav ms-auto">
        <ul class="d-flex align-items-center">
          <li class="nav-item dropdown pe-3">
            <a
              class="nav-link nav-profile d-flex align-items-center pe-0"
              href="#"
              data-bs-toggle="dropdown"
            >
              <img
                src="assets/img/profile-img.jpg"
                alt="Profile"
                class="rounded-circle"
              />
              <span class="d-none d-md-block dropdown-toggle ps-2"
                >用户名</span
              > </a
            ><!-- End Profile Iamge Icon -->
            <ul
              class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile"
            >
              <li class="dropdown-header">
                <h6>部门名</h6>
                <span>角色名</span>
              </li>
              <li>
                <hr class="dropdown-divider" />
              </li>

              <li>
                <a
                  class="dropdown-item d-flex align-items-center"
                  href="users-profile.html"
                >
                  <i class="bi bi-person"></i>
                  <span>用户设置</span>
                </a>
              </li>
              <li>
                <hr class="dropdown-divider" />
              </li>

              <li>
                <a class="dropdown-item d-flex align-items-center" href="#">
                  <i class="bi bi-gear"></i>
                  <span>注销</span>
                </a>
              </li>
            </ul>
            <!-- End Profile Dropdown Items -->
          </li>
          <!-- End Profile Nav -->
        </ul>
      </nav>
      <!-- End Icons Navigation -->
    </header>
    <!-- End Header -->

    <!-- ======= Sidebar ======= -->
    <aside id="sidebar" class="sidebar">
      <ul class="sidebar-nav" id="sidebar-nav">
        <li class="nav-item">
          <a class="nav-link collapse" href="index.html">
            <i class="bi bi-grid"></i>
            <span>主页</span>
          </a>
        </li>
        <!-- End Dashboard Nav -->
        <li class="nav-item">
          <a
            class="nav-link collapse"
            data-bs-target="#components-nav"
            data-bs-toggle="collapse"
            href="#"
          >
            <i class="bi bi-menu-button-wide"></i><span>系统管理</span
            ><i class="bi bi-chevron-down ms-auto"></i>
          </a>
          <ul
            id="components-nav"
            class="nav-content"
            data-bs-parent="#sidebar-nav"
          >
            <li>
              <a href="system-user.html" class="active"
                ><i class="bi bi-circle"></i><span>用户管理</span></a
              >
            </li>
            <li>
              <a href="system-role.html"
                ><i class="bi bi-circle"></i><span>角色管理</span></a
              >
            </li>
            <li>
              <a href="system-dept.html"
                ><i class="bi bi-circle"></i><span>部门管理</span></a
              >
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="blank.html">
            <i class="bi bi-file-earmark"></i>
            <span>后台模板页</span>
          </a>
        </li>
        <!-- End Blank Page Nav -->
      </ul>
    </aside>
    <!-- End Sidebar-->

    <main id="main" class="main">
      <div class="pagetitle">
        <nav>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="index.html">主页</a></li>
            <li class="breadcrumb-item">系统管理</li>
            <li class="breadcrumb-item active">用户管理</li>
          </ol>
        </nav>
      </div>
      <!-- End Page Title -->

      <section class="section">
        <div class="row">
          <div class="col-lg-12">
            <class class="card">
              <div class="card-body">
                <h5 class="card-title">用户列表</h5>
                <!-- 查询表单 -->
                <form
                  id="searchForm"
                  class="row row-cols-lg-auto g-3 mb-3 align-items-center"
                >
                  <div class="col-12">
                    <div class="input-group">
                      <input
                        type="text"
                        class="form-control"
                        name="username"
                        placeholder="账号"
                      />
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="input-group">
                      <input
                        type="text"
                        class="form-control"
                        name="name"
                        placeholder="姓名"
                      />
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="input-group">
                      <input
                        type="text"
                        class="form-control"
                        name="phone"
                        placeholder="联系电话"
                      />
                    </div>
                  </div>
                  <div class="col-12">
                    <select name="enableState" class="form-select">
                      <option disabled selected value="">状态</option>
                      <option value="启用">启用</option>
                      <option value="停用">停用</option>
                    </select>
                  </div>
                  <div class="col-12">
                    <button type="submit" class="btn btn-primary">
                      <i class="bi bi-search"></i>查询
                    </button>
                    <button type="reset" class="btn btn-secondary">
                      <i class="bi bi-arrow-repeat"></i>重置
                    </button>
                  </div>
                </form>
                <div id="dataTable"></div>
                <!-- 重置密码模态框 Start -->
                <div class="modal fade" id="resetPwdModal" tabindex="-1">
                  <form id="resetPwdForm" class="needs-validation" novalidate>
                    <input type="hidden" class="form-control" name="id" />
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title">重置密码</h5>
                          <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                          ></button>
                        </div>
                        <div class="modal-body">
                          <div class="px-5">
                            <div id="alertResetMessage"></div>
                            <div class="row mb-3">
                              <label
                                for="password"
                                class="col-sm-3 col-form-label d-flex justify-content-end"
                                >请输入新密码：</label
                              >
                              <div class="col-sm-9">
                                <input
                                  type="password"
                                  class="form-control"
                                  name="password"
                                  id="password"
                                  required
                                />
                              </div>
                            </div>
                            <div class="row mb-3">
                              <label
                                for="passwordRepeat"
                                class="col-sm-3 col-form-label d-flex justify-content-end"
                                >再次输入密码：</label
                              >
                              <div class="col-sm-9">
                                <input
                                  type="password"
                                  class="form-control"
                                  id="passwordRepeat"
                                  name="passwordRepeat"
                                  required
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="modal-footer">
                          <button
                            type="button"
                            class="btn btn-secondary"
                            name="close"
                            data-bs-dismiss="modal"
                          >
                            关闭
                          </button>
                          <button type="submit" class="btn btn-primary">
                            提交
                          </button>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
                <!-- 重置密码模态框 End -->
              </div>
            </class>
          </div>
        </div>
      </section>
    </main>
    <!-- End #main -->

    <!-- ======= Footer ======= -->
    <footer id="footer" class="footer">
      <div class="copyright">
        &copy; Copyright <strong><span>XX管理系统</span></strong
        >. All Rights Reserved
      </div>
      <div class="credits">
        Designed by 2022030102080 庄先琪
        <a href="https://bootstrapmade.com/">BootstrapMade</a>
      </div>
    </footer>
    <!-- End Footer -->

    <a
      href="#"
      class="back-to-top d-flex align-items-center justify-content-center"
      ><i class="bi bi-arrow-up-short"></i
    ></a>

    <!-- Vendor JS Files -->
    <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/vendor/gridjs/dist/gridjs.umd.js"></script>
    <script src="assets/vendor/gridjs/I10n/dist/l10n.umd.js"></script>
    <script src="assets/vendor/moment/moment.js"></script>
    <!-- Template Main JS File -->
    <script src="assets/js/main.js"></script>
    <script>
      function addQueryParam(url, param) {
        // 如果URL中已经有查询参数，则使用"&"来添加新参数
        // 如果没有，则使用"?"来添加第一个参数
        let separator = url.indexOf("?") !== -1 ? "&" : "?";
        // 添加参数到URL
        return url + separator + param;
      }
      const url = "/api/rest/user";
      let data = [];
      const columns = [
        {
          id: "id",
          hidden: true,
        },
        {
          id: "username",
          name: "用户名",
        },
        {
          id: "enableState",
          name: "状态",
        },
        {
          id: "name",
          name: "姓名",
        },
        {
          id: "phone",
          name: "手机",
        },
        {
          id: "email",
          name: "邮箱",
        },
        {
          id: "createAt",
          name: "创建时间",
        },
        {
          name: "操作",
          width: "25%",
          formatter: (_, row) =>
            gridjs.html(`
      <button id="resetPwdButton" type="button" data-bs-toggle="modal" data-bs-target="#resetPwdModal" class="btn btn-sm btn-warning m-1">
        <i class="bi bi-lock" ></i>重置密码
        </button>
      `),
        },
      ];
      const server = {
        url,
        then: (data) => {
          this.data = data.content;
          return data.content.map((item) => [
            item.id,
            item.username,
            item.enableState,
            item.name,
            item.phone,
            item.email,
            item.updateAt
              ? moment(item.updateAt).format("YYYY-MM-DD hh:mm:ss")
              : "",
          ]);
        },
        total: (data) => data.totalElements,
      };
      const pagination = {
        limit: 10,
        server: {
          url: (prev, page, limit) =>
            addQueryParam(prev, `size=${limit}&page=${page}`),
        },
      };
      const options = {
        columns,
        server,
        pagination,
        language: gridjs.l10n.cnCN,
      };
      window.onload = function () {
        const grid = new gridjs.Grid(options);
        grid.render(dataTable);
        grid.on("cellClick", (...args) => {
          const event = args[0];
          const userId = args[3].cells[0].data;
          if (event.target?.id === "resetPwdButton") {
            resetPwdForm.id.value = userId;
          }
        });

        //查询用户方法
        searchForm.addEventListener("submit", (event) => {
          event.preventDefault();
          const formData = new FormData();
          formData.set("username", searchForm.username.value.trim());
          formData.set("name", searchForm.name.value.trim());
          formData.set("phone", searchForm.phone.value.trim());
          formData.set("enableState", searchForm.enableState.value);
          const searchParams = new URLSearchParams(formData);
          options.server.url = addQueryParam(url, searchParams.toString());
          grid.updateConfig(options).forceRender();
        });

        //重置密码表单提交处理事件
        resetPwdForm.addEventListener("submit", (event) => {
          event.preventDefault();
          if (resetPwdForm.checkValidity()) {
            const formData = Object.fromEntries(new FormData(resetPwdForm));
            fetch(`${url}/${formData.id}/update-password`, {
              method: "PATCH",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify(formData),
            }).then((response) => {
              if (response.ok) {
                var button = resetPwdForm.querySelector('[name="close"]');
                var event = new Event("click");
                button.dispatchEvent(event);
                grid.updateConfig(options).forceRender();
              } else {
                response.json().then((data) => {
                  alert(
                    data.message,
                    "danger",
                    document.getElementById("alertResetMessage")
                  );
                });
              }
            });
          } else {
            resetForm.classList.add("was-validated");
          }
        });
      };
    </script>
  </body>
</html>
